函式除了在宣告與執行像有多種用法，函式結構或是否有名稱也有許多細節跟技巧。有時候函式需要名稱，有時候不用。匿名可以解決不必要的命名困境，取名也可以處理是否指向該函式的問題。匿名與非匿名函式的差別，就看在什麼情境下要使用了。中秋節連假的前夕，簡單來看幾個不同函式用法例子。

這章想學到什麼？

• 遞迴練習
• 好玩的具名行內函式
• 函式作為物件也好好玩

程式碼閱讀練習與撰寫

遞迴練習

//是否為回文的函式判斷
function isPalindrome(text) {
  if(text.length <= 1) return true;
  if(text.charAt(0) != text.charAt(text.length -1)) return false;
  return isPalindrome(text.substr(1, text.length -2))
}

//動畫使用的遞迴方法
var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

好玩的具名行內函式

//簡單行內函數判斷
let a = function b () {
    console.log(a == b)
};

//在方法中使用行內函數
var ninja = {
    chirp: function signal (n) {
     return n > 1 ? signal(n -1) + "-chirp" : "chirp";
    }
}
var samurai = { chirp: ninja.chirp }

函式作為物件也好好玩

函式永遠可以給你新的驚奇，你可能沒有想過他也可以附加屬性。

var obj = {};
var fn = function(){};
obj.prop = "hitsuke (distraction)"
fn.prop = "tanuki (climbing)"

//為函式標上屬性然後做後續判斷
var store = {
 nextId = 1,
 cache: {},
 add: function(fn) {
     if (!fn.id) {
       fn.id = store.nextId++;
       return !!(store.cache[fn.id] = fn)
     }
 }
}

function ninja(){}


store.add(ninja)
store.add(ninja)

中秋節快樂

參考資料

https://developer.mozilla.org/zh-TW/docs/Web/API/window/requestAnimationFrame